<template>
	<!--  :title-t="`transaction.${popupTitle}`"-->
	<base-popup
		:modelValue="modelValue"
		:title-t="`transaction.withdraw`"
		:is-go-back="false"
		@go-back="walletStore.setWithdrawResultPopupShow(false)"
		:closable="false"
		titleClass="pb-4 pt-6">
		<template #right>
			<base-icon name="order" size="20" @click="onClick" />
		</template>

		<div class="h-full py-[28px] px-[35px] pr-[41px] flex items-center flex-col">
			<base-icon
				class="text-[124px] text-danger"
				:class="{ '!text-success': success }"
				:name="success ? 'correct' : 'mistake'"></base-icon>
			<div class="mt-[21px] text-xl">{{ title }}</div>
			<div class="mt-2 inline-block w-[250px] text-center" v-html="desc" @click="onClick" />
			<div class="flex-1" />
			<base-button @click="onClickBack" class="mt-21" type="primary">
				{{ t('action.back') }}
			</base-button>
		</div>
	</base-popup>
</template>

<script lang="ts" setup>
import { computed, onMounted } from 'vue'
import { router } from '@/router'
import { t } from '@/utils'
import { useWalletStore } from '@/store'
import { BaseIcon, BaseButton, BasePopup } from '@/components/base'
import { WalletAction } from '@/types'

defineOptions({ name: 'ViewsWalletResult' })

const walletStore = useWalletStore()
const action = computed(() => walletStore.withdrawData.resultId)
const success = computed(() => walletStore.withdrawData.success === true)

const modelValue = computed(() => walletStore.showWithdrawResultPopup)
const title = computed(() => {
	if (Number(action.value) === WalletAction.withdraw.id) {
		return success.value ? t('walletResult.withdrawSuccessTitle') : ''
	}
	return ''
})

const desc = computed(() => {
	if (Number(action.value) === WalletAction.withdraw.id) {
		return success.value ? t('walletResult.withdrawSuccessDesc') : ''
	}
	return ''
})

/* eslint-disable @typescript-eslint/no-unused-vars */
// const popupTitle = Object.entries(WalletAction).find(([_, value]: [any, any]) => {
// 	return value.id === walletStore.withdrawData.resultId
// })?.[0]
/* eslint-enable @typescript-eslint/no-unused-vars */

const onClick = async () => {
	await router.replace({ name: 'transactions.withdraw' })
	walletStore.setWithdrawResultPopupShow(false)
}
const onClickBack = () => {
	walletStore.setWithdrawResultPopupShow(false)
}

onMounted(() => {
	// walletStore.getBalance()
})
</script>
<style lang="scss" scoped></style>
